<template>
  <view class="container">
    <!-- 分段 -->
    <view class="container">
        <uni-segmented-control
          :values="tabs"
          v-model="currentTab"
          style-type="button"
		  @clickItem="onClickItem"
          active-color="#007aff"
        ></uni-segmented-control>
    
        <view class="content">
          <view v-if="currentTab === 0">
            <!-- 搜索栏 -->
            <view class="search-box">
              <uni-search-bar 
                placeholder="搜索客户名称" 
                radius="100"
                @confirm="handleSearch"
                @clear="clearSearch"
              />
            </view>
            
            <!-- 会员列表 -->
            <uni-list>
              <uni-list-item 
                v-for="(member, index) in filteredMembers"
                :key="index"
                :title="member.name"
                :note="`积分：${member.points} | 到期时间：${member.expireDate}`"
                clickable
                @click="handleMemberClick(member)"
              >
                <!-- 左侧头像 -->
                <template v-slot:header>
                  <image 
                    :src="member.avatar" 
                    class="avatar"
                    mode="aspectFill"
                  />
                </template>
            
                <!-- 右侧附加信息 -->
                <template v-slot:footer>
                  <view class="right-content">
                    <uni-tag 
                      :text="member.level" 
                      :type="getLevelType(member.level)"
                      size="small"
                    />
                    <text 
                      class="status" 
                      :class="member.status === '正常' ? 'active' : 'expired'"
                    >
                      {{ member.status }}
                    </text>
                  </view>
                </template>
              </uni-list-item>
            </uni-list>
            
            <!-- 空状态 -->
            <uni-list-empty v-if="filteredMembers.length === 0" text="暂无客户会员"/>
          </view>
          <view v-if="currentTab === 1">
            <!-- 搜索栏 -->
            <view class="search-box">
              <uni-search-bar 
                placeholder="搜索会员名称" 
                radius="100"
				v-model="key"
              />
            </view>
			
			<view class="members-container">
			      <view class="member-card" :style="{ backgroundColor: member.color }" v-for="member in viplist" :key="member.id">
			        <view style="font-size: 26px;">{{member.name}}</view>
					<view style="color: red;font-size: 20px;">￥{{member.price}}</view>
					<view style="float: right;">{{member.time}}</view>
			      </view>
			    </view>
			
			<!-- 添加按钮 -->
			<view class="add-btn" @click="attvip">
			  <uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
			</view>
			
          </view>
        </view>
      </view>

    
  </view>
</template>

<script>
   
	import {Get_Vip_carShop} from "@/pages/apis/login.js"
export default {
  data() {
    return {
		tabs: ['客户会员', '会员'],
		      currentTab: 0,
      searchText: '',
	  viplist:[],
	  key:'',
	  vip_total:0,
      members: [
        {
          id: 1,
          name: '张三',
          avatar: '/static/avatars/1.png',
          points: 1500,
          level: '黄金会员',
          expireDate: '2024-12-31',
          status: '正常'
        },
        {
          id: 2,
          name: '李四',
          avatar: '/static/avatars/2.png',
          points: 800,
          level: '白银会员',
          expireDate: '2023-06-30',
          status: '已过期'
        },
        // 更多测试数据...
      ]
    }
  },
  computed: {
    filteredMembers() {
      return this.members.filter(member => 
        member.name.includes(this.searchText) || 
        member.level.includes(this.searchText)
      )
    },
	
	
  },
  methods: {
	  attvip(){
	      uni.navigateTo({
	      	url: '/pages/vip/addvip'
	      })
	    },
	  async bind(){
	  		  const res = await Get_Vip_carShop({
	  			key:this.key,
	  			page:1,
	  			limit:10
	  		  });
	  		  if(res.code===0){
	  		  	this.viplist=res.data.data;
	  			this.vip_total=res.data.total;
	  		  }
	  },
	onClickItem(e) {
	       if (this.currentTab !== e.currentIndex) {
	       					this.currentTab = e.currentIndex
	       				}
	 },
    getLevelType(level) {
      const map = {
        '黄金会员': 'warning',
        '白金会员': 'error',
        '钻石会员': 'success',
        '白银会员': 'primary'
      }
      return map[level] || 'default'
    },
    handleMemberClick(member) {
      uni.navigateTo({
        url: `/pages/member/detail?id=${member.id}`
      })
    }
  },
  onLoad(){
  	this.bind();
  },
  watch: {
    // 监听 searchKeyword 的变化
    "key":function(newVal, oldVal) {
		console.log("123");
      this.bind();
    }
  }
}
</script>

<style scoped>
    .container {
        padding: 10rpx 20rpx;
    }

    .search-box {
        padding: 20rpx 0;
        background-color: #fff;
    }

    .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
    }

    .right-content {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    .status {
        font-size: 24rpx;
        margin-top: 10rpx;
    }

    .active {
        color: #4cd964;
    }

    .expired {
        color: #dd524d;
    }

    .expired {
        color: #dd524d;
    }

    .add-btn {
        position: fixed;
        right: 40rpx;
        bottom: 100rpx;
        width: 100rpx;
        height: 100rpx;
        background-color: #007AFF;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.4);
    }



    .members-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* 列表项样式覆盖 */
    /deep/ .uni-list-item__content {
        padding: 20rpx 0;
    }

    .member-card {
        background-color: #000;
        color: #fff;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        justify-content: space-between;
        align-items: center;
    }
</style>